<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../../app/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <script src="../../app/bower_components/jquery/dist/jquery.js"></script>
    <script src="../../app/bower_components/angular/angular.js"></script>
</head>
<body ng-controller="AppController" ng-cloak>

<abc name="{{xx}}">
    <div>{{yy}}</div>
</abc>

<script>
    var app = angular.module('app', []);
    app.controller('AppController', function ($scope) {
        $scope.yy = 'yy';
    });
    app.directive('abc', function () {
        return {
            restrict: 'ACE',
            scope: {},
            transclude: true,
            link: function (scope, element, attrs, ctrl, $transclude) {
                $transclude(scope.$parent, function (clone) {
                    element.append(clone);
                });

                $transclude(scope.$parent, function (clone) {
                    element.append(clone);
                });
            }
        }
    });

</script>
</body>
</html>